<template>
  <div class="icon-box">    
    <ul class="iconTab" v-for="h in copyList" :key="h.type">            
      <li v-for="v in h.childList" :key="v.key">        
        <div class="img-name">
          <img :src="v.url" />
          <span class="name" :title="v.name">{{ v.name }}</span>
        </div>
        <span class="number" :title="item[v.key] ? item[v.key] : 0" v-if="v.name">{{ item[v.key] ? item[v.key] : 0 }}</span>
        <span :class="['tip', {'redColor': !item[v.key] || (item[v.key] && item[v.key] > target)}]" v-if="v.tip">{{ item[v.key] ? (item[v.key] > target ? `(目标为${target}，未达标)`: `(目标为${target}，已达标)` ): `(目标为${target}，未达标)` }}</span>
      </li>
    </ul>    
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
export default {  
  name: 'ContentHeadList',
  props: {    
    list: {
      type: Array,
      default: [],
    },
    item: {
      type: Object,
      default: {},
    }
  },
  data() {
    return {
      copyList: [],
      target: 250
    }
  },
  mounted() {
    let resultArray = [];
    const resultNum = 6;
    for (let item of this.list) {      
      let type = item.type;
      let idx = resultArray.findIndex(val => {
          return val.type === type
      });
      let resultMap = idx !== -1 ? resultArray[idx] : {};
      if (Object.keys(resultMap).length === 0) {    
        Object.assign(resultMap, item)          
        // resultMap['childList'] = [item];
        resultMap['childList'] = new Array(resultNum).fill([])
        resultMap['childList'][0] = item
        resultArray.push(resultMap);
      } else {
        let resultObj = resultArray[idx] || {};
        let array = resultObj['childList'];
        const oarr = array.findIndex(o => {
          return Object.assign(o).length === 0
        })
        array[oarr] = item
      }
    }
    this.copyList = resultArray;
  },  
  methods: {
    initTarget() {
      var vm = this
      getAction('/manage/codeInfo/list', { column: 'code', order: 'Asc', type: '项目达标周期值', isdel: 0, pageSize: -1 })
        .then((res) => {
          if (res.code == 200 && res.result && res.result.records) {
            this.target = res.result.records[0] ? parseInt(res.result.records[0]) : this.target
          } else {
            this.$message.warning('查询[项目达标周期值]失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询[项目达标周期值]失败:' + res.message)
        })
    },
  },
}
</script>

<style lang="less" scoped>
.icon-box{border: 1px solid #dbdbdb;}
.iconTab {
  border-top: 0px;
  border-left: 0px;
  padding-left: 0px !important;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dbdbdb;
  li {
    display: flex;
    width: calc((100%) / 6);
    text-align: center;
    border-right: 1px solid #dbdbdb;
    height: 87px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px 0px;
    position: relative;
    .img-name {
      line-height: initial;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding: 0 2px;
      img{margin-top: -4px;}
    }
    .name {
      margin-left: 4px;
      color: #000;      
      font-size: 16px;
      color: #666666;      
    }
    .number {
      font-size: 20px;
      color: #333333;
      width: 100%;
      line-height: initial;
      padding: 5px 2px 0;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .tip{background-color: #e8eef1;font-size: 12px;color: #3371b8;display: inline-block;width: 100%;overflow:hidden;
      text-overflow:ellipsis;white-space:nowrap;
      position: absolute;bottom: 0;padding: 1px 2px;
    }
    .redColor{
      color: red;
    }
    &:nth-child(6){border-right: none;}
  }
  &:last-of-type{
    border-bottom: none;
  }
}
</style>